<template>
  <view class="report-detail-container">
    <view class="header">
      <view class="back" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="title">健康报告详情</view>
    </view>
    
    <view class="report-header">
      <view class="report-title">{{ reportDetail?.title || '健康报告' }}</view>
      <view class="report-date">生成日期：{{ formatDate(reportDetail?.date) }}</view>
      <view class="report-hospital">{{ reportDetail?.hospital || '医院名称' }}</view>
    </view>
    
    <view class="section-card" v-if="reportDetail?.sections">
      <view v-for="(section, index) in reportDetail.sections" :key="index" class="report-section">
        <view class="section-title">{{ section.title }}</view>
        <view class="section-content">{{ section.content }}</view>
        
        <view class="data-table" v-if="section.tableData">
          <view class="table-header">
            <view v-for="(col, colIndex) in section.tableData.columns" :key="colIndex" class="table-cell">{{ col }}</view>
          </view>
          <view class="table-row" v-for="(row, rowIndex) in section.tableData.rows" :key="rowIndex">
            <view v-for="(col, colIndex) in section.tableData.columns" :key="colIndex" class="table-cell" :class="{'abnormal': row.status === 'abnormal' && colIndex === 1}">
              {{ row[col] }}
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="section-card" v-if="reportDetail">
      <view class="section-title">医生建议</view>
      <view class="doctor-advice">{{ reportDetail.doctorAdvice || '暂无医生建议' }}</view>
    </view>
    
    <view class="empty-state" v-if="!reportDetail">
      <text class="empty-text">报告不存在或已被删除</text>
    </view>
    
    <view class="action-buttons" v-if="reportDetail">
      <view class="action-btn" @tap="downloadReport">下载报告</view>
      <view class="action-btn secondary" @tap="shareReport">分享报告</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reportId: '',
      reportDetail: null
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.reportId = options.id
      this.getReportDetail()
    }
  },
  
  methods: {
    getReportDetail() {
      // 模拟获取报告详情
      // 在实际应用中，应该从服务器或本地存储获取
      setTimeout(() => {
        this.reportDetail = {
          id: this.reportId,
          title: '年度体检报告',
          date: new Date('2023-09-05'),
          hospital: '北京协和医院',
          sections: [
            {
              title: '基本信息',
              content: '患者：张三，性别：男，年龄：45岁，身高：175cm，体重：70kg，BMI：22.9'
            },
            {
              title: '检查结果',
              content: '本次体检共完成26项检查，其中2项结果异常，需进一步随访。',
              tableData: {
                columns: ['检查项目', '检查结果', '参考范围', '单位'],
                rows: [
                  { '检查项目': '血红蛋白', '检查结果': '140', '参考范围': '120-160', '单位': 'g/L', status: 'normal' },
                  { '检查项目': '血糖', '检查结果': '6.3', '参考范围': '3.9-6.1', '单位': 'mmol/L', status: 'abnormal' },
                  { '检查项目': '血压', '检查结果': '130/85', '参考范围': '90-139/60-89', '单位': 'mmHg', status: 'normal' },
                  { '检查项目': '总胆固醇', '检查结果': '5.8', '参考范围': '0-5.2', '单位': 'mmol/L', status: 'abnormal' },
                  { '检查项目': 'ALT', '检查结果': '28', '参考范围': '0-40', '单位': 'U/L', status: 'normal' }
                ]
              }
            },
            {
              title: '主要问题',
              content: '1. 血糖偏高，提示可能存在糖耐量异常或糖尿病倾向，建议定期监测血糖。\n2. 总胆固醇偏高，建议调整饮食结构，减少高脂肪食物摄入。'
            }
          ],
          doctorAdvice: '根据检查结果，建议您：1. 保持良好的饮食习惯，减少高糖高脂食物摄入；2. 增加体育锻炼，每周至少进行3次30分钟以上的有氧运动；3. 3个月后复查血糖和血脂；4. 如有不适，请及时就医。'
        }
      }, 500)
    },
    
    formatDate(date) {
      if (!date) return '--'
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },
    
    goBack() {
      uni.navigateBack()
    },
    
    downloadReport() {
      uni.showToast({
        title: '报告下载功能开发中',
        icon: 'none'
      })
    },
    
    shareReport() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.report-detail-container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  
  .back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    
    .back-icon {
      font-size: 40rpx;
      color: #333;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.report-header {
  background-color: #32CD32;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  color: #fff;
  position: relative;
  
  .report-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 15rpx;
  }
  
  .report-date {
    font-size: 26rpx;
    opacity: 0.9;
    margin-bottom: 10rpx;
  }
  
  .report-hospital {
    font-size: 28rpx;
    font-weight: 500;
  }
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.report-section {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
    padding-left: 16rpx;
    border-left: 6rpx solid #32CD32;
  }
  
  .section-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20rpx;
    white-space: pre-line;
  }
}

.data-table {
  border: 1px solid #eee;
  border-radius: 8rpx;
  overflow: hidden;
  font-size: 26rpx;
  
  .table-header {
    display: flex;
    background-color: #f5f5f5;
    
    .table-cell {
      flex: 1;
      padding: 16rpx 10rpx;
      text-align: center;
      font-weight: bold;
      color: #333;
      border-right: 1px solid #eee;
      
      &:last-child {
        border-right: none;
      }
    }
  }
  
  .table-row {
    display: flex;
    border-top: 1px solid #eee;
    
    .table-cell {
      flex: 1;
      padding: 16rpx 10rpx;
      text-align: center;
      color: #666;
      border-right: 1px solid #eee;
      
      &:last-child {
        border-right: none;
      }
      
      &.abnormal {
        color: #ff4d4f;
        font-weight: bold;
      }
    }
  }
}

.doctor-advice {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  white-space: pre-line;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  background-color: #fff;
  border-radius: 16rpx;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
  
  .action-btn {
    flex: 1;
    background-color: #32CD32;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 8rpx;
    
    &.secondary {
      background-color: #fff;
      color: #32CD32;
      border: 1px solid #32CD32;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style> 